<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
    <template #top>
      <u-navbar
        back-text=""
        :is-back="true"
        title="换绑手机"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <view class="flex flex-col gap-6 p-4">
      <view class="text-[28px] text-[#161A24] font-medium"> 验证手机号</view>
      <view class="w-full h-[48px] bg-[#FFFFFF] rounded-[8px] flex items-center gap-2">
        <view class="w-[60px] text-[15px] text-[#161A24] font-medium flex justify-center">+86</view>
        <input type="number" class="flex-1" v-model="phoneNumber" placeholder="请输入手机号码" maxlength="11" />
      </view>
      <view
        class="w-full h-[44px] bg-[#99DBDC] rounded-full flex justify-center items-center"
        :style="{ backgroundColor: isValidMobile ? '#00A9AB' : '#99DBDC' }"
        @click="sendSms"
      >
        <view class="text-[16px] text-[#E5F6F6] font-medium"> 获取验证码 </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        phoneNumber: ''
      }
    },
    computed: {
      isValidMobile() {
        return this.phoneNumber.length === 11
      }
    },
    methods: {
      async sendSms() {
        vk.pubfn.debounce(async () => {
          if (!this.phoneNumber) return vk.toast('请输入手机号码')
          if (!vk.myfn.validatePhone(this.phoneNumber)) return vk.toast('请输入正确的手机号码')
          let res = await api.sendSms({
            mobile: this.phoneNumber,
            template_code: 'user_change_mobile'
          })
          vk.toast(res.msg)
          if (!res.code) return
          vk.navigateTo(`/pages/my/verificationCode?mobile=${this.phoneNumber}&type=1`)
        }, 1000)
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
